<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
		<div id="main" style="width: 600px;height:400px;"></div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//获取数据
		getHouse();

		function getHouse() {
			$.ajax({
				type: "get",
				url: "data/house.json",
//								url:"http://120.48.109.174:8081/area/map",
//								async:true,
//								data:{
//									id:"AREA|88cff55c-aaa4-e2e0"
//								},
				success: function(res) {
					//					console.log(res)
					var house = res.body;
//					var house = res.body.filter(function(item) {
//						return item.count > 80
//					})
					//					console.log(house)	
					var areas = [];
					var count = [];
					house.forEach(function(item) {
						areas.push(item.label);
						count.push(item.count);
					})
					showHouse(areas, count);
				}
			});
		}

		//展示图标

		function showHouse(areas, count) {
			console.log(areas, count);
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));

			// 指定图表的配置项和数据
			var option = {
				title: {
					text: '北京房屋出租信息'
				},
				tooltip: {},
				legend: {
					data: ['数量']
				},
				xAxis: {
					data: areas
				},
	
				yAxis: {},
				series: [{
					name: '数量',
					type: 'bar',
					data: count
				}]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);

		}
	</script>

</html>